<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>拨打</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/call.css" />
</head>

<body>
  <div id="app" v-cloak>
    <div class="wrap flex-wrap flex-vertical">
      <div :class="['call-wrap', 'flex-con', 'sex' + sex]">
      </div>
    </div>
  </div>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
  var app, rong, maplertc, dialogBox;
  apiready = function () {
    rong = api.require('rongCloud2');
    maplertc = api.require('mapleRTC');
    dialogBox = api.require('dialogBox');
    app = new Vue({
      el: '#app',
      data: {
        sex: '',
        age: '',
        signature: '',
        extra: {},
        type: '',
        isConnect: false,
        ownUid: '',
        audioProfile: 0,
        enableSpeakerphone: false,
      },
      created: function () {
        var _this = this;
        _this.getPageParam();
        _this.closemy();
        if (api.systemType != 'ios') {
          _this.playRing();
        }
        api.setKeepScreenOn({
          keepOn: true
        });
        setTimeout(function () {
          if (!_this.isConnect) {
            api.toast({
              msg: '对方无应答',
              duration: 2000,
              location: 'bottom'
            });
            rong.sendCommandMessage({
              conversationType: 'PRIVATE',
              targetId: _this.extra.toId + 'a',
              name: 'hangUp',
              data: JSON.stringify(_this.extra)
            }, function (ret, err) {});
            rong.sendRichContentMessage({
              conversationType: 'PRIVATE',
              targetId: _this.extra.toId + 'a',
              title: 'call_message',
              description: '无应答',
              imageUrl: '../image/hang_up.png',
              extra: JSON.stringify(_this.extra)
            }, function(ret, err) {});
            api.sendEvent({
              name: 'refreshIM',
              extra: {
                type: 'RC:ImgTextMsg',
                title: 'call_message',
                con: '无应答',
                imageUrl: '../image/hang_up.png',
                mode: 'SEND',
                id: _this.extra.fromId,
                name: _this.extra.fromName,
                avatar: _this.extra.fromAvatar
              }
            });
            api.closeWin();
          }
        }, 30000);
        api.addEventListener({
          name: 'callTime'
        }, function (ret, err) {
          _this.showRechargeDialog(ret.value.con)
        });
        api.addEventListener({
          name: 'openGiftBox'
        }, function (ret, err) {
          api.openFrame({
            name: 'gift',
            url: 'gift.html',
            rect: {
              x: 0,
              y: 0,
              w: api.winWidth,
              h: api.winHeight
            },
            pageParam: {
              to_uid: _this.extra.toId,
              to_uname: _this.extra.toName,
              to_uavatar: _this.extra.toAvatar
            }
          });
        });
        api.addEventListener({
          name: 'give_gift_notice_private'
        }, function (ret, err) {
          var message_content = JSON.parse(ret.value.result.message.content.data);
          api.sendEvent({
            name: 'message',
            extra: message_content
          });
        });
        api.addEventListener({
          name: 'switchCamera'
        }, function (ret, err) {
          maplertc.switchCamera(function (ret) {
            if (ret.status) {
              api.toast({
                msg: '切换成功'
              });
            }
          });
        });
        api.addEventListener({
          name: 'enableBeautify'
        }, function (ret, err) {
          maplertc.enableBeautify({
            enabled: true
          }, function (ret) {
            if (ret.status) {
              api.toast({
                msg: '美颜设置成功'
              });
            }
          });
        });
        api.addEventListener({
          name: 'setAudioProfile'
        }, function (ret, err) {
          var audioProfile = '';
          if (_this.audioProfile == 0) {
            _this.audioProfile = 1;
            audioProfile = 'voiceHighQuality';
          } else {
            _this.audioProfile = 0;
            audioProfile = 'voiceStandard';
          }
          maplertc.setMediaProfile({
            audioProfile: audioProfile
          }, function (ret) {
            if (ret.status) {
              api.sendEvent({
                name: 'setAudioProfileCallBack',
                extra: {
                  audioProfile: _this.audioProfile
                }
              });
              if (_this.audioProfile == 0) {
                api.toast({
                  msg: '音频标准模式'
                });
              }
              if (_this.audioProfile == 1) {
                api.toast({
                  msg: '音频高质量模式'
                });
              }
            }
          });
        });
        api.addEventListener({
          name: 'setEnableSpeakerphone'
        }, function (ret, err) {
          _this.enableSpeakerphone = !_this.enableSpeakerphone;
          maplertc.setEnableSpeakerphone({
            enabled: _this.enableSpeakerphone
          }, function (ret) {
            if (ret.status) {
              api.sendEvent({
                name: 'setEnableSpeakerphoneCallBack',
                extra: {
                  enableSpeakerphone: _this.enableSpeakerphone
                }
              });
              api.toast({
                msg: _this.enableSpeakerphone ? '打开扬声器' : '关闭扬声器'
              });
            }
          });
        });
        api.addEventListener({
          name: 'keyback'
        }, function (ret, err) {
          api.confirm({
            title: '提醒',
            msg: '确定要退出吗？',
            buttons: ['确定', '取消']
          }, function (ret, err) {
            if (ret.buttonIndex == 1) {
              _this.hangUp();
            }
          });
        });
        api.addEventListener({
          name: 'closeWin'
        }, function (ret, err) {
          api.closeWin();
        });
        api.addEventListener({
          name: 'videoCallHangUp'
        }, function (ret, err) {
          _this.hangUp();
        });
        api.addEventListener({
          name: 'hangUp'
        }, function (ret, err) {
          if (ret) {
            api.closeFrame({
              name: 'video_call_control'
            });
            api.closeFrame({
              name: 'frm_local'
            });
            api.closeFrame({
              name: 'frm_remote'
            });
            api.toast({
              msg: '对方已挂断',
              duration: 2000,
              location: 'bottom'
            });
            if (!_this.isConnect) {
              setTimeout(function () {
                api.closeWin();
              }, 1000);
            } else {
              if (_this.sex == '1') {
                setTimeout(function () {
                  api.closeWin();
                }, 1000);
              } else {
                api.openFrame({
                  name: 'score_frame',
                  url: 'score_frame.html',
                  rect: {
                    x: 0,
                    y: 0,
                    w: api.winWidth,
                    h: api.winHeight
                  },
                  pageParam: {
                    id: _this.extra.toId,
                    name: _this.extra.toName,
                    avatar: _this.extra.toAvatar,
                    sex: _this.sex,
                    age: _this.age,
                    signature: _this.signature,
                  }
                });
              }
            }
          }
        });
        api.addEventListener({
          name: 'giveGift_showVipDialog'
        }, function (ret, err) {
          api.closeFrame({
            name: 'gift_box'
          });
          _this.showVipDialog('开通VIP即可赠送礼物');
        });
        api.addEventListener({
          name: 'giveGift_showRechargeDialog'
        }, function (ret, err) {
          api.closeFrame({
            name: 'gift_box'
          });
          _this.showRechargeDialog('您的余额不足，无法赠送礼物');
        });
      },
      mounted: function () {
        this.init();
        this.videoCallControl();
        // 监听诱导关闭
        api.sendEvent({
          name: 'clearTimer',
          extra: {}
        });
      },
      methods: {
        closemy: function () {
          setTimeout(function () {
            api.closeWin({
              name: 'video_detail'
            });
          }, 1000);
        },
        //打开本地视频frame
        openLocalFrame: function () {
          api.openFrame({
            name: 'frm_local',
            url: 'frm_local.html',
            rect: {
              x: api.winWidth - 150,
              y: 30,
              w: 140,
              h: 200
            },
            bounces: true,
          });
        },

        //打开远端视频frame
        openRemoteFrame: function () {
          api.openFrame({
            name: 'frm_remote',
            url: 'frm_remote.html',
            rect: {
              x: 0,
              y: 0,
              w: api.winWidth,
              h: api.winHeight,
            },
            bounces: true,
          });
        },

        // 初始化
        init: function () {
          var _this = this;
          if (_this.type == 'videoCall') {
            _this.openRemoteFrame();
            _this.openLocalFrame();
          }
          //加入频道成功监听
          maplertc.addEventListener({
            name: 'joinChannelSuccessListener'
          }, function (ret) {
            _this.ownUid = ret.uid;
          });
          //加入频道失败监听
          maplertc.addEventListener({
            name: 'joinChannelFailedListener'
          }, function (ret) {
            api.alert({
              title: 'joinChannelFailedListener',
              msg: JSON.stringify(ret)
            })
          });
          //连接丢失监听
          maplertc.addEventListener({
            name: 'connectionLostListener'
          }, function (ret) {
            api.alert({
              title: 'connectionLostListener',
              msg: JSON.stringify(ret)
            })
          });
          //离开频道监听
          maplertc.addEventListener({
            name: 'leaveChannelListener'
          }, function (ret) {});
          //踢下线监听
          maplertc.addEventListener({
            name: 'forceKickOutChannelListener'
          }, function (ret) {
            if (ret.reason == 4200)
              api.alert({
                title: "提示",
                msg: "强行被其他用户踢出频道！"
              });
            if (ret.reason == 4201)
              api.alert({
                title: "提示",
                msg: "强行被服务器踢出频道！"
              });
          });
          //用户加入通知监听
          maplertc.addEventListener({
            name: 'userJoinedNoticeListener'
          }, function (ret) {
            for (var i = 0; i < ret.uids.length; i++) {
              if (_this.ownUid == ret.uids[i]) {} else {
                _this.isConnect = true;
                api.stopPlay();
                api.sendEvent({
                  name: 'callIsConnect',
                })
                if (_this.type == 'voiceCall') {
                  maplertc.setEnableSpeakerphone({
                    enabled: false
                  }, function (ret) {});
                }
                if (_this.type == 'videoCall') {
                  if (api.systemType == 'android' && Number(api.systemVersion.slice(0, 1)) < 8) {
                    //设置本地视频显示view
                    maplertc.setupLocalVideo({
                      localView: {
                        fixedOn: 'frm_local'
                      }
                    }, function (ret) {});
                    //开始显示本地预览
                    maplertc.startPreview(function (ret) {});
                    //发送本地视频
                    maplertc.muteLocalVideoStream({
                      muted: false
                    }, function (ret) {
                      api.toast({
                        msg: 'muteLocalVideoStream' + JSON.stringify(ret)
                      });
                    });
                    //设置远端视频显示view
                    maplertc.setupRemoteVideo({
                      remoteView: {
                        fixedOn: 'frm_remote',
                        fixed: true
                      },
                      userId: ret.uids[i]
                    }, function (ret) {
                      api.toast({
                        msg: 'setupRemoteVideo' + JSON.stringify(ret)
                      });
                    });
                    //观看远端视频
                    maplertc.muteRemoteVideoStream({
                      userId: ret.uids[i],
                      muted: false
                    }, function (ret) {
                      api.toast({
                        msg: 'muteRemoteVideoStream' + JSON.stringify(ret)
                      });
                    });
                  } else {
                    //设置远端视频显示view
                    maplertc.setupRemoteVideo({
                      remoteView: {
                        fixedOn: 'frm_remote',
                        fixed: true
                      },
                      userId: ret.uids[i]
                    }, function (ret) {
                      api.toast({
                        msg: 'setupRemoteVideo' + JSON.stringify(ret)
                      });
                    });
                    //观看远端视频
                    maplertc.muteRemoteVideoStream({
                      userId: ret.uids[i],
                      muted: false
                    }, function (ret) {
                      api.toast({
                        msg: 'muteRemoteVideoStream' + JSON.stringify(ret)
                      });
                    });
                    //设置本地视频显示view
                    maplertc.setupLocalVideo({
                      localView: {
                        fixedOn: 'frm_local'
                      }
                    }, function (ret) {});
                    //开始显示本地预览
                    maplertc.startPreview(function (ret) {});
                    //发送本地视频
                    maplertc.muteLocalVideoStream({
                      muted: false
                    }, function (ret) {
                      api.toast({
                        msg: 'muteLocalVideoStream' + JSON.stringify(ret)
                      });
                    });
                  }
                  maplertc.enableBeautify({
                    enabled: true
                  }, function (ret) {
                    if (ret.status) {
                      api.toast({
                        msg: '美颜设置成功'
                      });
                    }
                  });
                }
              }
            }
          });
          //用户离开通知监听
          maplertc.addEventListener({
            name: 'userOfflineNoticeListener'
          }, function (ret) {
            for (var i = 0; i < ret.uids.length; i++) {
              if (_this.ownUid == ret.uids[i]) {
                return;
              } else {
                _this.hangUp();
              }
            }
          });
          maplertc.addEventListener({
            name: 'errorListener'
          }, function (ret) {
            api.alert({
              title: 'errorListener',
              msg: JSON.stringify(ret)
            })
          });
          if (_this.type == 'voiceCall') {
            // 设置频道属性(setChannelProfile)
            maplertc.setChannelProfile({
              profile: 'voiceOnly'
            }, function (ret) {});
            // 设置媒体属性(setMediaProfile)
            maplertc.setMediaProfile({
              audioProfile: 'voiceHighQuality',
            }, function (ret) {});
          }
          if (_this.type == 'videoCall') {
            // 设置频道属性(setChannelProfile)
            maplertc.setChannelProfile({
              profile: 'voiceAndVideo' //频道模式，"voiceOnly" 纯语音模式，"voiceAndVideo" 语音视频模式，"liveLook" 直播观看模式，
            }, function (ret) {
              // api.alert({
              //   title: 'setChannelProfile',
              //   msg: JSON.stringify(ret)
              // });
            });
            //设置sfu模式
            maplertc.setVideoConferenceProfile({
              profile: 'sfu' //频道模式，"normal" 同时支持sfu和mcu，"sfu" 服务器端转发模式，"mcu" 服务器端混屏模式，当前只支持4路窗口混屏
            });
            // 设置媒体属性(setMediaProfile)
            maplertc.setMediaProfile({
              audioProfile: 'voiceHighQuality', //音频模式，"voiceStandard" voice标准模式，"voiceHighQuality" voice高质量模式，"musicStandard" music标准模式，"musicHighQuality" music高质量模式；
              videoProfile: '480P' //视频模式，"240P" 320240分辨率，"360P" 640360分辨率，"480P" 640*480分辨率
            }, function (ret) {
              // api.alert({
              //   title: 'setMediaProfile',
              //   msg: JSON.stringify(ret)
              // });
            });
          }
          maplertc.setJoinChannelUserId({
            userId: $api.getStorage('uid') + ''
          }, function (ret) {
            // api.alert({
            //   title: 'setJoinChannelUserId',
            //   msg: JSON.stringify(ret)
            // });
          });
          _this.joinChannel_maplertc();
        },

        // 视频聊天控制frame
        videoCallControl: function () {
          var _this = this;
          // 获取对方信息
          api.ajax({
            url: baseUrl + 'user/index',
            method: 'get',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid'),
                see_uid: _this.extra.toId
              },
            }
          }, function (ret, err) {
            if (ret.status == 200) {
              _this.sex = ret.data.sex;
              _this.age = ret.data.age;
              _this.signature = ret.data.signature;
              // 打开视频聊天控制frame
              api.openFrame({
                name: 'video_call_control',
                url: 'video_call_control.html',
                rect: {
                  x: 0,
                  y: 0,
                  w: api.winWidth,
                  h: api.winHeight
                },
                pageParam: {
                  sex: ret.data.sex,
                  age: ret.data.age,
                  signature: ret.data.signature,
                  extra: api.pageParam.extra,
                  type: api.pageParam.type,
                  time: api.pageParam.time,
                }
              });
            }
          })
        },

        // 振铃
        playRing: function () {
          var _this = this;
          api.startPlay({
            path: 'widget://res/ring.mp3'
          }, function (ret, err) {
            if (ret) {
              _this.playRing();
            }
          });
        },

        // 获取页面传入数据
        getPageParam: function () {
          var _this = this;
          _this.extra = api.pageParam.extra;
          _this.type = api.pageParam.type;
        },

        joinChannel_maplertc: function () {
          var _this = this;
          maplertc.joinChannel({
            channelId: 'channel_' + $api.getStorage('uid') + '_' + _this.extra.toId,
            userId: $api.getStorage('uid')
          }, function (ret) {
            // api.alert({
            //   title: 'joinChannel',
            //   msg: JSON.stringify(ret)
            // });
          });
        },

        // 挂断
        hangUp: function () {
          var _this = this;
          // 挂断视频
          api.ajax({
            url: baseUrl + 'message/callstop',
            method: 'post',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid'),
                from_uid: $api.getStorage('uid'),
                to_uid: _this.extra.toId,
                type: '0',
              },
            }
          }, function (ret, err) {
            if (ret.status == 200) {
              maplertc.leaveChannel();
              api.closeFrame({
                name: 'video_call_control'
              });
              api.closeFrame({
                name: 'frm_local'
              });
              api.closeFrame({
                name: 'frm_remote'
              });
              api.sendEvent({
                name: 'refreshRandom',
              })
              if (!_this.isConnect) {
                rong.sendCommandMessage({
                  conversationType: 'PRIVATE',
                  targetId: _this.extra.toId + 'a',
                  name: 'hangUp',
                  data: JSON.stringify(_this.extra)
                }, function (ret, err) {});
                rong.sendRichContentMessage({
                  conversationType: 'PRIVATE',
                  targetId: _this.extra.toId + 'a',
                  title: 'call_message',
                  description: '已取消',
                  imageUrl: '../image/hang_up.png',
                  extra: JSON.stringify(_this.extra)
                }, function(ret, err) {});
                api.sendEvent({
                  name: 'refreshIM',
                  extra: {
                    type: 'RC:ImgTextMsg',
                    title: 'call_message',
                    con: '已取消',
                    imageUrl: '../image/hang_up.png',
                    mode: 'SEND',
                    id: _this.extra.fromId,
                    name: _this.extra.fromName,
                    avatar: _this.extra.fromAvatar
                  }
                });
                api.closeWin();
              } else {
                if (_this.sex == '1') {
                  setTimeout(function () {
                    api.closeWin();
                  }, 1000);
                } else {
                  api.openFrame({
                    name: 'score_frame',
                    url: 'score_frame.html',
                    rect: {
                      x: 0,
                      y: 0,
                      w: api.winWidth,
                      h: api.winHeight
                    },
                    pageParam: {
                      id: _this.extra.toId,
                      name: _this.extra.toName,
                      avatar: _this.extra.toAvatar,
                      sex: _this.sex,
                      age: _this.age,
                      signature: _this.signature,
                    }
                  });
                }
              }
            }
          })
        },

        showVipDialog: function (txt) {
          dialogBox.raffle({
            texts: {
              mainText: txt,
              subText: '',
              leftTitle: '开通会员'
            },
            styles: {
              bg: '#272320',
              w: 300,
              corner: 2,
              icon: {
                marginT: 20,
                w: 40,
                h: 40,
                corner: 20,
                iconPath: 'widget://image/icon_big_vip.png'
              },
              main: {
                marginT: 10,
                color: '#fff',
                size: 14,
              },
              sub: {
                marginT: 10
              },
              left: {
                w: 300,
                h: 50,
                marginL: 0,
                marginB: 0,
                corner: 2,
                bg: '#000',
                color: '#fff',
                size: 16
              }
            },
            tapClose: true
          }, function (ret, err) {
            if (ret.eventType == 'left') {
              dialogBox.close({
                dialogName: 'raffle'
              });
              api.openWin({
                name: 'my_vip',
                url: 'my_vip.html',
                slidBackEnabled: false
              });
            }
          });
        },

        showRechargeDialog: function (title) {
          dialogBox.evaluation({
            styles: {
              bg: '#fff',
              corner: 2,
              w: 300,
              title: {
                marginT: 20,
                size: 14,
                h: 50,
                color: '#000',
                bold: true,
                borderColor: '#eee',
                borderWidth: 1
              },
              buttons: [{
                w: 300,
                h: 50,
                color: '#0077ff',
                size: 14,
                borderColor: '#eee',
                borderWidth: 1
              }, {
                w: 300,
                h: 50,
                color: '#0077ff',
                size: 14,
                borderColor: '#eee',
                borderWidth: 1
              }, {
                w: 300,
                h: 50,
                color: '#000',
                size: 14
              }]
            },
            texts: {
              title: title,
              buttons: [{
                text: '去赚钱'
              }, {
                text: '去充值'
              }, {
                text: '取消'
              }]
            },
            tapClose: true
          }, function (ret, err) {
            if (ret) {
              if (ret.index == 0) {
                dialogBox.close({
                  dialogName: 'evaluation'
                });
                api.openWin({
                  name: 'my_share',
                  url: 'my_share.html',
                  slidBackEnabled: false
                });
              }
              if (ret.index == 1) {
                dialogBox.close({
                  dialogName: 'evaluation'
                });
                api.openWin({
                  name: 'recharge',
                  url: 'recharge.html',
                  slidBackEnabled: false
                });
              }
              if (ret.index == 2) {
                dialogBox.close({
                  dialogName: 'evaluation'
                });
              }
            }
          });
        },

      },
    })
  
  }
</script>